<template>
  <div class="about">

      <button @click="like"> ❤️太赞了 </button>

      <div class="clock">
        <!-- v-for 可以遍历整数 -->
          <div class="mark" :class="{ show }" v-for="(d, i) in 60" :key="d" :style="`  transform:  rotate(${6 * i}deg) translateY(-94px); transition-delay:${i * 20}ms`"></div>
          <div class="h" :class="{ show }" :style="`transform: rotate(${30 * h + 30 * (m / 60)}deg); transition: ${td}`"></div>
          <div class="m" :class="{ show }" :style="`transform: rotate(${6 * m}deg); transition: ${td}`"></div>
          <div class="s" :class="{ show }" :style="`transform: rotate(${6 * s}deg); transition: ${td}`"></div>
      </div>
      <!--
        创建（data、methods初始化）
          created() 请求接口
        挂载（添加DOM）
          mounted()  操作DOM
        更新（数据变化、视图刷新）
        销毁（删除实例）
          beforeDestroy()  停定时器 解绑事件

        this.$parent  父组件实例
        this.$children  所有的子组件组成的数组

        this.$refs.名称   子组件的实例
       -->
  </div>
</template>

<script>
    export default {
      data() {
        return {
          h: 0,
          m: 0,
          s: 0,
          timeId: null,
          show: false,
          td: '1s'
        }
      },
      methods: {
        setTime() {
          if (this.show) this.td = '0s';
          const date = new Date();
          this.h = date.getHours();
          this.m = date.getMinutes();
          this.s = date.getSeconds();
          this.show = true;
        },
        start() {
          this.timeId = setInterval(() => {
            this.setTime();
          }, 1000)
        },
        like() {
          window.eventBus.$emit('add', 10);
        }
      },
      created() {
        // create 声明周期勾子函数中可以使用 this，可以访问数据，可以调用方法，没有Dom
        this.start();
      },
      beforeDestroy() {
        // beforeDestroy用来解绑手动绑定的事件，用来停掉定时器
        clearInterval(this.timeId);
      }
    }
</script>

<style scoped>
    .clock {
      margin: 0 auto;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 1px solid #333;
      position: relative;
    }
    .clock:after {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #333;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .mark {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2px;
      height: 6px;
      background: #ddd;
      margin: -3px 0 0 -1px;
      opacity: 0;
    }
    .mark.show {
      opacity: 1;
    }
    .mark:nth-child(5n+1) {
      height: 10px;
      background: #000;
      margin-top: -5px;
    }
    .h, .m, .s {
      position: absolute;
      left: 50%;
      bottom: 50%;
      transform-origin: center bottom;
      opacity: 0;
    }
    .h.show, .m.show, .s.show {
      opacity: 1;
    }
    .h {
        width: 6px;
        height: 40px;
        background: #000;
        margin-left: -3px;
    }
    .m {
        width: 4px;
        height: 60px;
        background: rgba(0, 0, 0, .7);
        margin-left: -2px;
    }
    .s {
        width: 2px;
        height: 70px;
        background: rgba(0, 0, 0, .6);
        margin-left: -1px;
    }
</style>
